<template>
    <refresh class="u-refresh" @refresh="onrefresh" @pullingdown="onpullingdown" :display="refreshing ? 'show' : 'hide'">
        <image class="loading-bg" resize="contain" src="bmlocal://assets/acw/refresh2.png"></image>
        <div class="l-txt-box">
            <text ref="lTxt1" class="l-txt l-txt-1">好</text>
            <text ref="lTxt2" class="l-txt l-txt-2">的</text>
            <text ref="lTxt3" class="l-txt l-txt-3">服</text>
            <text ref="lTxt4" class="l-txt l-txt-4">务</text>
            <text ref="lTxt5" class="l-txt l-txt-5">没</text>
            <text ref="lTxt6" class="l-txt l-txt-6">那</text>
            <text ref="lTxt7" class="l-txt l-txt-7">么</text>
            <text ref="lTxt8" class="l-txt l-txt-8">远</text>
        </div>
    </refresh>
</template>
<script>
var animation = weex.requireModule('animation')
export default {
    props: [],
    data() {
        return {
            refreshing: false,
            stopAnimation: false,
            loadingAR: [
                { ref: 'lTxt1', p: [-77, -75], delay: 0 },
                { ref: 'lTxt2', p: [-47, -81], delay: 50 },
                { ref: 'lTxt3', p: [-15, -88], delay: 100 },
                { ref: 'lTxt4', p: [12, -90], delay: 150 },
                { ref: 'lTxt5', p: [-5, -49], delay: 200 },
                { ref: 'lTxt6', p: [25, -55], delay: 250 },
                { ref: 'lTxt7', p: [55, -61], delay: 300 },
                { ref: 'lTxt8', p: [85, -61], delay: 350 }
            ]
        }
    },
    methods: {
        loadingAni() {
            for (var i = 0; i < this.loadingAR.length; i++) {
                this.shake(this.$refs[this.loadingAR[i].ref], this.loadingAR[i].p[0], this.loadingAR[i].p[1], 3, 1, 200, this.loadingAR[i].delay);
            }
        },
        loadingAniDown() {
            for (var i = 0; i < this.loadingAR.length; i++) {
                this.shake(this.$refs[this.loadingAR[i].ref], 0, 0, 0, 0, 500, 0, i == this.loadingAR.length - 1);
            }                        
        },
        endRefresh(time) {
            setTimeout(() => {
                this.$emit('loadingDown', {
                    status: 'loadingDown'
                })       
                setTimeout(() => {
                    this.refreshing = false
                },100)            
            }, time) 
        },
        shake(_ref, _x, _y, _k, _d, _duration, _delay, endShake) {
            animation.transition(_ref, {
                styles: {
                    transform: 'translate(' + (_x - 0) + 'px,' + (_y - _k * _d) + 'px)',
                },
                duration: _duration | 500, //ms
                timingFunction: 'ease-out',
                delay: _delay | 0 //ms
            }, function() {
                !this.stopAnimation && this.shake(_ref, _x, _y, _k, -1 * _d);
                if (endShake) {
                    this.endRefresh(_duration + 100)
                }

            }.bind(this))
        },
        onrefresh(event) {
            this.stopAnimation= false
            this.loadingAni();
            this.refreshing = true;
            setTimeout(() => {
                this.stopAnimation = true
                this.loadingAniDown();
            }, 2000)
        },
        onpullingdown(event) {}
    }
}
</script>
<style scoped>
.u-refresh {
    position: absolute;
    height: 170px;
    width: 750px;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    /* background-color: bisque; */
}

.loading-bg {
    position: absolute;
    left: 250px;
    margin-top: 40px;
    width: 250px;
    height: 120px;
}

.l-txt-box {
    height: 106px;
    width: 200px;
    overflow: hidden;
}

.l-txt {
    height: 30px;
    width: 30px;
    font-size: 25px;
    position: absolute;
    top: 105px;
    left: 87px;
    color: #666;
}
</style>